<script setup lang='ts'>
  import { onMounted, reactive } from 'vue';
  import { DailystatisticsApi } from '@/api/controller';
  import { Toastloading } from '@/utils/public';
  import { getPlayEndTime, getDateArray } from '@/utils'
  import Pagination from "@/components/Pagination/index.vue";
  import table2excel from 'js-table2excel';
  const action = reactive({
    total:0,
    list:[] as any[],
    dateArr:getDateArray('ymdhis') as Array<number>
  })
  const listQuery = reactive({
    page:1,
    limit:20,
  })
  const filtersMoney = (moeny=0)=>{
    return moeny / 10
  }
  const handleSerach = ()=>{
    listQuery.page = 1
    getList()
  }
  const getList = async()=> {
    const loading = Toastloading()
    const timeObi = getPlayEndTime(action.dateArr)
    const res = await DailystatisticsApi.statDaily({
      created_st:timeObi.playTime,
      created_ed:timeObi.endTime,
      ...listQuery
    })
    loading.close()
    const { data=[], total=0 } = res.data
    action.total = total
    action.list = data
  }
  const handleDownload = async()=>{
    const loading = Toastloading('数据导出中')
    const res = await DailystatisticsApi.statDaily({
      page:1,
      limit:3000
    })
    loading.close()
    const { data=[] } = res.data
    const tHeader = [
      { title: 'ID', key: "id"},
      { title: '日期', key: "created_date"},
      { title: '新增用户', key: "userNewNum"},
      { title: '开播厅数', key: "roomOpenNumAll"},
      { title: '有效开播房间数', key: "roomOpenNumTrue"},
      { title: '上麦用户人数(含主播)', key: "microNumAll"},
      { title: '有效上麦人数(含主播)', key: "microNumTrue"},
      { title: '活跃总用户', key: "activeNumAll"},
      { title: '总用户首充金额(钻石)', key: "firstChargeTotal"},
      { title: '首充总人数', key: "firstChargeNum"},
      { title: '总充值金额(钻石)', key: "rechargeAll"},
      { title: '总充值人数', key: "rechargeUserNum"},
      { title: '总消费金额(钻石)', key: "useDiamondAll"},
      { title: '总消费人数', key: "useDiamondUserNum"},
      { title: 'Android活跃用户', key: "activeNumAndroid"},
      { title: 'Android充值金额(钻石)', key: "rechargeUserTotalAndroid"},
      { title: 'Android充值人数', key: "rechargeUserNumAndroid"},
      { title: 'Android消费金额(钻石)', key: "useDiamondTotalAndroid"},
      { title: 'Android消费人数', key: "useDiamondNumAndroid"},
      { title: 'IOS活跃用户', key: "activeNumIos"},
      { title: 'IOS充值金额(钻石)', key: "rechargeUserTotalIos"},
      { title: 'IOS充值人数', key: "rechargeUserNumIos"},
      { title: 'IOS消费金额(钻石)', key: "useDiamondTotalIos"},
      { title: 'IOS消费人数', key: "useDiamondNumIos"},
    ]
    const list = data.map((res:any)=>{
      const { firstChargeTotal=0 , rechargeAll=0, rechargeUserTotalAndroid=0, rechargeUserTotalIos=0 } = res
      res.firstChargeTotal = filtersMoney(firstChargeTotal)
      res.rechargeAll = filtersMoney(rechargeAll)
      res.rechargeUserTotalAndroid = filtersMoney(rechargeUserTotalAndroid)
      res.rechargeUserTotalIos = filtersMoney(rechargeUserTotalIos)
      return res
    })
    table2excel(
      tHeader,
      list,
      `每日统计`)
  }
  onMounted(()=>{
    getList()
  })
</script>

<template>
  <div class="xm-content">
    <div class="xm-headTab">
      <div class="labelBox">
        <div class="labelItem">
          <div class="label">日期：</div>
          <el-date-picker
            v-model="action.dateArr"
            type="datetimerange"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          />
        </div>
        <div class="labelItem">
          <el-button type="primary" @click="handleSerach">查询</el-button>
          <el-button type="warning" @click="handleDownload">导出列表</el-button>
        </div>
      </div>
    </div>
    <el-table show-summary class="xm-main xm-TableCenter" :data="action.list" border>
      <el-table-column width="80" prop="id" label="ID" />
      <el-table-column min-width="150" prop="created_date" label="日期" />
      <el-table-column width="120" prop="userNewNum" label="新增用户" />
      <el-table-column width="120" prop="roomOpenNumAll" label="开播厅数" />
      <el-table-column width="120" prop="roomOpenNumTrue" label="有效开播房间数" />
      <el-table-column width="120" prop="microNumAll" label="上麦用户人数(含主播)" />
      <el-table-column width="120" prop="microNumTrue" label="有效上麦人数(含主播)" />
      <el-table-column label="用户总计">
        <el-table-column width="140" prop="activeNumAll" label="活跃用户" />
        <el-table-column width="140" prop="firstChargeTotal" label="首充金额(钻石)">
          <template #default="scope">{{ filtersMoney(scope.row.firstChargeTotal) }}</template>
        </el-table-column>
        <el-table-column width="140" prop="firstChargeNum" label="首充人数" />
        <el-table-column width="140" prop="rechargeAll" label="总充值金额(钻石)">
          <template #default="scope">{{ filtersMoney(scope.row.rechargeAll) }}</template>
        </el-table-column>
        <el-table-column width="140" prop="rechargeUserNum" label="总充值人数" />
        <el-table-column width="140" prop="useDiamondAll" label="总消费金额(钻石)" />
        <el-table-column width="120" prop="useDiamondUserNum" label="总消费人数" />
      </el-table-column>
      <el-table-column label="Android">
        <el-table-column width="140" prop="activeNumAndroid" label="活跃用户" />
        <el-table-column width="140" prop="rechargeUserTotalAndroid" label="充值金额(钻石)">
          <template #default="scope">{{ filtersMoney(scope.row.rechargeUserTotalAndroid) }}</template>
        </el-table-column>
        <el-table-column width="140" prop="rechargeUserNumAndroid" label="充值人数" />
        <el-table-column width="140" prop="useDiamondTotalAndroid" label="消费金额(钻石)" />
        <el-table-column width="140" prop="useDiamondNumAndroid" label="消费人数" />
      </el-table-column>
      <el-table-column label="IOS">
        <el-table-column width="140" prop="activeNumIos" label="活跃用户" />
        <el-table-column width="140" prop="rechargeUserTotalIos" label="充值金额(钻石)">
          <template #default="scope">{{ filtersMoney(scope.row.rechargeUserTotalIos) }}</template>
        </el-table-column>
        <el-table-column width="140" prop="rechargeUserNumIos" label="充值人数" />
        <el-table-column width="140" prop="useDiamondTotalIos" label="消费金额(钻石)" />
        <el-table-column width="140" prop="useDiamondNumIos" label="消费人数" />
      </el-table-column>
    </el-table>
    <Pagination v-show="action.total > 0" :total="action.total" v-model:page="listQuery.page"
      v-model:limit="listQuery.limit" @pagination="getList" />
  </div>
</template>